<template>
  <div class="app">
    <a-card title="注册" class="card" style="width: 400px;">
      <van-form @submit="userRegister">
        <van-cell style="margin-top: 16px;">
          <van-field v-model="state.formData.username" name="用户名" label="用户名" placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]" />
        </van-cell>
        <van-cell style="margin-top: 16px;">
          <van-field v-model="state.formData.password" type="password" name="密码" label="密码" placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]" />
        </van-cell>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">注册</van-button>
        </div>
        <van-button round block type="primary" @click="Login">返回登录</van-button>
      </van-form>
    </a-card>
  </div>
</template>
<script>
import { defineComponent, reactive, onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { message } from 'ant-design-vue'
import url from '@/main';
export default defineComponent({
  name: 'App',

  setup() {
    const router = useRouter()

    const state = reactive({
      formData: {
        username: '',
        password: ''
      },
    });

    const mobileLogin = () => {
      if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)))
        router.push('/mobilelogin')
    };//跳转到移动端页面

    const userRegister = () => {
      axios.post('http://'+url+':3000/register', state.formData)
        .then(function (response) {
          message.info(response.data.message)
          if(response.data.message=='注册成功'){
            router.push('/login')
          }
        })
    };//登录按钮事件

    const Login = () => {
      router.push('/login')
    };//注册按钮事件
    onBeforeMount(() => {
      mobileLogin()
    });//先判断是移动端还是pc端

    return {
      state,
      userRegister,
      router,
      Login
    }
  }
})
</script>